<template>
  <view class="img-swiper margin-middle row justify-center">
    <swiper class="swiper-container border-radius-small" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item class="swiper-container-x border-radius-small" v-for="(item, index) in state.swiperList" :key="index">
        <image class="border-radius-small" :src="item.image" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
  </view>
</template>
<script setup>
/*import { reactive } from 'vue'

// 定义响应式数据
const state = reactive({
  swiperList: [
    { image: '../../static/bmw-1.jpeg' },
    { image: '../../static/bmw-1.jpeg' },
  ],
})
*/
import { inject } from 'vue'

const state = inject('context')

</script>

<style>
.img-swiper {
  .swiper-container {
    display: block;
    width:100%;
    height: 200px;
    .swiper-container-x {
      width: 100%;
      height: auto;
      image {
        width: 100%;
        height: 200px;
      }
    }
  }
}
</style>
